<template>
  <div class="role">
    <el-tabs v-model="activeName">
      <el-tab-pane label="角色列表" name="list">
        <el-table :data="roleList" style="width: 100%">
          <el-table-column label="#" width="100" type="index"></el-table-column>
          <el-table-column label="角色名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.role_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="角色ID" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.add_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="角色描述" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.desc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="添加角色" name="add">
          <RoleAdd/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RoleAdd from './add'
export default {
  components:{
    RoleAdd
  },
  data() {
    return {
      roleList: [] ,//角色列表
      activeName:'list'
    };
  },
  created() {
    this.$http.getRoleList().then(res => {
      // console.log(res);
      if (res && res.data.code == 200) {
        this.roleList = res.data.data;
      }
    });
  }
};
</script>

<style>
</style>